<template>
    <div style="width: 50%;margin: auto">
        <Form ref="formData" :model="formData" :rules="ruleValidate" :label-width="80">
            <FormItem label="用户名" prop="userName"  >
                <Input v-model="formData.userName" disabled ></Input>
            </FormItem>
            <FormItem label="昵称" prop="realName">
                <Input v-model="formData.realName" ></Input>
            </FormItem>
            <FormItem label="密码" prop="password">
                <Input type="password" v-model="formData.password" ></Input>
            </FormItem>
            <FormItem label="年龄" prop="age">
                <Input type="number" v-model="formData.age"></Input>
            </FormItem>
            <FormItem label="家庭住址" prop="address">
                <Input v-model="formData.address" ></Input>
            </FormItem>
            <FormItem label="个性签名" prop="autograph">
                <Input v-model="formData.autograph" ></Input>
            </FormItem>
            <FormItem label="电话号码" prop="mobilePhone">
                <Input v-model="formData.mobilePhone" ></Input>
            </FormItem>
            <FormItem label="专业" prop="profession">
                <Input v-model="formData.profession" ></Input>
            </FormItem>
            <FormItem label="二级学院" prop="secondaryCollege">
                <Input v-model="formData.secondaryCollege" ></Input>
            </FormItem>
            <FormItem label="学校名称" prop="deptName">
                <Input v-model="formData.deptName" ></Input>
            </FormItem>
            <FormItem label="邮箱" prop="email">
                <Input v-model="formData.email" ></Input>
            </FormItem>
            <div style="text-align: center;margin: 15px">
                <Button @click="handleReset('formData')">重置</Button>
                <Button type="primary" @click="handleSubmit('formData')" style="margin-left: 8px">保存</Button>
            </div>
            <!--加载中显示 -->
            <Spin size="large" fix v-if="spinShow"></Spin>
        </Form>
    </div>
</template>

<script>
    import Base from '@/components/table/BaseEdit.vue';
    import user from '@/common/user';
    export default {
        extends:Base,
        data () {
            this.$axiosUtils.post("/api/system/user/read",{id:user.getUser().id}).then((res)=>{
                this.formData=res;
            });
            //年龄效验
            const validateAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入年龄!'));
                }
                // 模拟异步验证效果
                if (!(value%1==0)) {
                    callback(new Error('请输入一个整数!'));
                }
                callback();
            };
            return {
                ruleValidate: {
                    userName: [
                        { required: true, message: '请输入用户名!', trigger: 'blur' },
                    ],
                    realName: [
                        { required: true, message: '请输入昵称!', trigger: 'blur' },
                    ],
                    searchName: [
                        { required: true, message: '请输入查找名称!', trigger: 'blur' },
                    ],
                    age: [
                        { required: true,  trigger: 'blur',validator: validateAge},
                    ],
                    password: [
                        { required: true, message: '请输入密码!', trigger: 'blur' },
                    ],
                    autograph: [
                        { required: true, message: '请输入个性签名!', trigger: 'blur' },
                    ],
                    profession: [
                        { required: true, message: '请输入专业!', trigger: 'blur' },
                    ],
                    secondaryCollege: [
                        { required: true, message: '请输入二级学院!', trigger: 'blur' },
                    ],
                    deptName: [
                        { required: true, message: '请输入学校名称!', trigger: 'blur' },
                    ],
                    email: [
                        { required: true, message: '请输入邮箱!', trigger: 'blur' },
                    ],
                    mobilePhone: [
                        { required: true, message: '请输入电话号码!', trigger: 'blur' },
                    ],
                    address: [
                        { required: true, message: '请输入家庭住址!', trigger: 'blur' },
                    ]
                }
            }
        },
        methods: {
            loadDataById(id){
                if(id!=null){
                    //id不为空时获取数据
                    this.load("/api/system/user/read",{id})
                }else{
                    this.formData={}
                }
            },handleSubmit (name) {
                //保存
                this.save(name,"/api/system/user/save");
            },
        }
    }
</script>

<style scoped>

</style>
